<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-镜像-构建历史</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">

<div id="timeline" class="timeline">
    <div class="time-label time-group"><span class="bg-info">{{created}}</span></div>
    <div>
        <i class="fa fa-clock-o bg-success"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> {{size}}</span>
            <h3 class="timeline-header">
                <b>#{{num}} {{id}}</b>
            </h3>
            <div class="timeline-body">
                <code>{{createdBy}}</code>
            </div>
            <div class="timeline-footer">
                {{comment}}
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var template = $("#timeline").html();
    $("#timeline").empty();

    var params = Utils.getParams(location.href);
    var serverId = params["serverId"];
    var imageId = params["imageId"];

    $.ajax({
        url: Url.dockerService.dockerImageDetail + "?serverId=" + serverId + "&id=" + encodeURIComponent(imageId),
        type: HttpMethod.get,
        success: function (result, status, xhr) {
            for (var i = 0; i < result.histories.length; i++) {
                var html = template
                    .replace(new RegExp("{{num}}", "gm"), i + 1)
                    .replace(new RegExp("{{id}}", "gm"), result.histories[i].id)
                    .replace(new RegExp("{{size}}", "gm"), result.histories[i].size)
                    .replace(new RegExp("{{created}}", "gm"), result.histories[i].created)
                    .replace(new RegExp("{{createdBy}}", "gm"), result.histories[i].createdBy)
                    .replace(new RegExp("{{comment}}", "gm"), result.histories[i].comment);
                $("#timeline").append(html);
            }
        },
        beforeSend: function (xhr) {
            $("#timeline").html("<div style='text-indent: 2em'></div>");
        },
    });
</script>
</body>
</html>